<template>
  <div class="wyn-father">
    <h2>Father</h2>
    <Child ref="childRef" :name @on-click="getNums" />

    <p>子组件传递的值：{{ nums }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import Child from "./Child.vue";

//【给子组件传递的值】
const name = ref("张三");

//【子组件传递过来的值】
const nums = ref<number[]>([]);
const getNums = (...args: number[]) => {
  nums.value = args;
};

//【获取子组件暴露的内容】
const childRef = ref<InstanceType<typeof Child>>();

nextTick(() => {
  console.log(childRef.value?.name);
  childRef.value?.log();
});
</script>

<style scoped lang="scss">
@include b(father) {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  padding: 20px;

  p {
    margin-top: 10px;
  }
}
</style>
